<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/oauthplatform/static/sms/plugin/layui/css/layui.css">
	<title>统一身份认证管理平台</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			font-size: 10px;
		}
		.backPicture {
			background: url(/oauthplatform/static/sms/img/bj.png) no-repeat;
			height: 22rem;
			background-size: 100%;
		}
		.backPicture img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-top: 2.5rem;
			height: 11%;
		}
		.backPicture div {
			margin-top: 3.2rem;
			padding-left: 6%;
			font-size: 2rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
		.content{
			width: 90%;
			background: #FFFFFF;
			box-shadow: 0rem 2rem 43rem 0rem rgba(0, 136, 255, 0.1);
			border-radius: 1rem;
			margin-left: auto;
			margin-right: auto;
			position:relative;
			bottom: 7.2rem;
			padding-top: 15%;
			text-align: center;
		}
		.inputStyle {
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			border: none;
			border-bottom: .1rem solid #E7E7E7;
			font-size: 1rem;
			margin-bottom: 10%;
		}
		.register {
			background-color: #1765AD;
			width: 80%;
			margin-top: 1rem;
		}
		.test {
			margin-top: 5%;
			margin-bottom: 10%;
			border: none;
			width: 30%;
		}
		.pass-form {
			display: none;
		}
		.layui-form-item div {
			width: 80%;
			display: flex;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10%;
		}
		.code-input {
			margin-left: auto;
			margin-right: auto;
			border: none;
			border-bottom: .1rem solid #E7E7E7;
			font-size: 1rem;
		}
		.getCode {
			padding: 0;
			border: none;
			color: #1765AD;
		}
	</style>
</head>
<body>
<div class="backPicture">
	<img src="/oauthplatform/static/sms/img/logo.png" alt="">
	<div>欢迎您登录!</div>
</div>
<div class="content">
	<!-- 密码登录 -->
	<form class="layui-form pass-form" action="" lay-filter="example">
		<div class="layui-form-item">
			<input type="text" name="username" lay-verify="required" lay-reqtext="用户名为必填项" placeholder="请输入账号"
			       autocomplete="off" class="layui-input inputStyle">
			<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
			       class="layui-input inputStyle">
			<button type="button" class="layui-btn layui-btn-fluid layui-btn-radius register" lay-submit
			        lay-filter="pass_submit_button">登录
			</button>
			<button type="button" class="layui-btn layui-btn-primary test codePass">验证码登录</button>
		</div>
	</form>
	<!-- 验证码登录 -->
	<form class="layui-form code-form" action="" lay-filter="example">
		<div class="layui-form-item">
			<input input type="tel" name="phone" lay-verify="required|phoneNew" lay-reqtext="手机号为必填项" autocomplete="off"
			       placeholder="请输入手机号" class="layui-input inputStyle phone-val">
			<div>
				<input type="text" name="number" lay-verify="required" lay-reqtext="验证码为必填项" placeholder="请输入验证码"
				       autocomplete="off" class="layui-input code-input">
				<button type="button" class="layui-btn layui-btn-primary getCode">获取验证码</button>
			</div>
			<button type="button" class="layui-btn layui-btn-fluid layui-btn-radius register" lay-submit
			        lay-filter="code_submit_button">登录
			</button>
			<button type="button" class="layui-btn layui-btn-primary test passTest">密码登录</button>
		</div>
	</form>
</div>
</body>
<script src="/oauthplatform/static/sms/js/jquery.min.js"></script>
<script src="/oauthplatform/static/sms/plugin/layui/layui.js"></script>
<script>
	$(function () {
		if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
			window.location.href = "/oauthplatform/login/index"
		}

		layui.use('form', function () {
			var form = layui.form;
			// 自定义校验规则
			form.verify({
				pass: [
					/^[\S]{6,12}$/,
					'密码必须6到12位，且不能出现空格'
				],
				phoneNew: [
					/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/,
					'请输入正确的手机号'
				]
			});

			//监听登录 —— 验证码登录
			form.on('submit(code_submit_button)', function (data) {
				post("/oauthplatform/authentication/mobile", {mobile: data.field.phone, smsCode: data.field.number});
				return false;
			});

			//监听登录 —— 账号登录
			form.on('submit(pass_submit_button)', function (data) {
				post("/oauthplatform/login", {username: data.field.username, password: data.field.password});
				return false;
			});
		});

		// 页签切换
		$(".passTest").click(function () {
			$(".pass-form").show();
			$(".code-form").hide();
		});
		$(".codePass").click(function () {
			$(".code-form").show();
			$(".pass-form").hide();
		});

		// input 焦点事件
		$(".phone-val").blur(function () {
			$(".phone-val").removeAttr("style");
		})

		// 获取验证码点击事件
		$(".getCode").click(function () {
			var phone = $(".phone-val").val();
			var phoneReg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
			if (phone == '') {
				layer.msg("手机号码不能为空！");
				$(".phone-val").attr("style", "color: red;");
			} else if (phone.length != 11) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else if (!phoneReg.test(phone)) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else {
				checkPhoneIsExist();
			}
		});

		// 验证手机号
		function checkPhoneIsExist() {
			var phone = $(".phone-val").val();
			$.ajax({
				type: 'get',
				data: {
					mobile: phone,
					codePhoneType: "0",
				},
				url: '/oauthplatform/code/sms',
				success: function (data) {
					if (data == 200) {
						var time = 60;
						var getTime = setInterval(function () {
							if (time == -1) {
								clearInterval(getTime);
								$(".getCode").prop('disabled', false);
								$(".getCode").text("获取验证码");
								time = 60;
								return;
							} else {
								$(".getCode").prop('disabled', true);
								$(".getCode").text("" + time + "s后重新发送");
								time--;
							}
						}, 1000);
					} else if (data == 121) {
						layer.msg("无该手机号信息，请账号登录！");
						$(".passTest").trigger("click");
					} else if (data == 122) {
						layer.msg("该用户实名认证未完善，请账号登录完善！");
						$(".passTest").trigger("click");
						// setTimeout(function(){
						//    window.location.href = "authenticationPc.html";
						// },2000);
					} else {
						layer.msg("网络异常请稍后重试！");
					}
				}
			})
		};
	})

	/*虚拟表单*/
	function post(URL, PARAMS) {
		var temp = document.createElement("form");
		temp.action = URL;
		temp.method = "post";
		temp.style.display = "none";
		for (var x in PARAMS) {
			var opt = document.createElement("textarea");
			opt.name = x;
			opt.value = PARAMS[x];
			temp.appendChild(opt);
		}
		document.body.appendChild(temp);
		temp.submit();
		return temp;
	}
</script>
</html>